<template>
  <div class="home">
    <Scene 
      :event="eventList"
    />
    <BigScreen 
      :info="dataInfo"
      :event="eventList"
    />
  </div>
</template>

<script setup>
import Scene from '@/components/Scene.vue'
import BigScreen from '@/components/BigScreen.vue'
import { onMounted, reactive, ref } from 'vue'
import { getSmartCityInfo, getSmartCityEventList } from '@/api/api'
import gsap from 'gsap'

const dataInfo = reactive({
  event: {
    number: 0
  },
  iot: {
    number: 0
  },
  power: {
    number: 0
  },
  test: {
    number: 0
  }
})
const eventList = ref([])

onMounted(() => {
  queryInfo()
  queryEventList()
  setInterval(() => {
    queryInfo()
    queryEventList()
  }, 10000)
  
})
const queryInfo = async () => {
  const res = await getSmartCityInfo()
  // console.log(res, 'getSmartCityInfo');
  for(let key in dataInfo) {
    dataInfo[key].name = res.data.data[key].name
    dataInfo[key].unit = res.data.data[key].unit
    gsap.to(dataInfo[key], {
      number: res.data.data[key].number,
      duration: 1
    })
  }
}

const queryEventList = async () => {
  const res = await getSmartCityEventList()
  // console.log(res, 'getSmartCityEventList');
  eventList.value = res.data.list
}

</script>
